<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newList" :key="news.id">
        <button @click="showNewsDetail(news)">查看新闻</button>

        <!-- query方式  -->
        <!-- <RouterLink :to="{
          name: 'xiangqing',
          // path: '/news/detail',
          query: {
            title: news.title,
            content: news.content
          }
        }">
          {{ news.title }}
        </RouterLink> -->

        <!-- params方式  -->
        <RouterLink :to="{
          // 只能用name
          name: 'xiangqing',
          params: {
            title: news.title,
            content: news.content
          }
        }">
          {{ news.title }}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView />
    </div>
  </div>

</template>

<script setup lang="ts" name="home">
import router from "@/router"
import { reactive, ref } from "vue"
const newList = reactive([
  { id: 1, title: '新闻1', content: '抗癌食物' },
  { id: 2, title: '新闻2', content: '学vue' },
  { id: 3, title: '新闻3', content: '网吧go' }
])
function showNewsDetail(news: any) {
  router.push({
    name: 'xiangqing',
    params: {
      title: news.title,
      content: news.content
    }
  })
}
</script>
<style scoped>
.news {
  display: flex;
  justify-content: space-between;
}

.news ul li {
  width: 200px;
  margin: 20px 0;
  font-size: 20px;
  color: green;
}

.news-content {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 25px;
  margin: 20px;
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  list-style: none;
}
</style>